<template>
  <n-config-provider :theme="theme">
    <n-loading-bar-provider>
      <n-dialog-provider>
        <n-notification-provider>
          <n-message-provider>
            <n-layout class="app-layout">
              <!-- 头部导航 -->
              <Header />

              <!-- 主要内容区域 -->
              <n-layout-content class="main-content">
                <router-view />
              </n-layout-content>

              <!-- 页脚 -->
              <Footer />

              <!-- 环境指示器（仅开发环境显示） -->
              <!-- <EnvIndicator /> -->
            </n-layout>
          </n-message-provider>
        </n-notification-provider>
      </n-dialog-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { darkTheme } from 'naive-ui'
import Header from '@/components/common/Header.vue'
import Footer from '@/components/common/Footer.vue'
import EnvIndicator from '@/components/common/EnvIndicator.vue'

const route = useRoute()

// 主题配置（可以根据需要切换暗色主题）
const theme = computed(() => {
  // 这里可以根据用户偏好或系统主题来切换
  return null // 使用默认亮色主题
})
</script>

<style>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

#app {
  height: 100%;
}

.app-layout {
  min-height: 100vh;
}

.main-content {
  min-height: calc(100vh - 64px - 200px); /* 减去头部和页脚的高度 */
  padding: 24px;
  background: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    padding: 16px;
    min-height: calc(100vh - 120px - 200px); /* 移动端头部可能更高 */
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }
}

</style>

<!-- 引入Font Awesome图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
